<template>
	<view>
		<view class="item-block">
			<text class="item-lable">上传照片：</text>
			<view class="item-input" style="background:none;color:#7A7A7A;height:auto;">
				<image :src="data.thumb" class="imgs" @click="imgChoose()"></image>
			</view>
		</view>
		<view class="item-block">
			<text class="item-lable">姓　　名：</text>
			<input placeholder="姓名" class="item-input" v-model="data.nickname" />
		</view>
		<view class="item-block">
			<text class="item-lable">性　　别：</text>
			<picker @change="pickerSex" :value="indexs" range-key="value" :range="sexList" class="item-input icon-right">
				<view :class="[indexs==''?'item-default':'']">{{sexList[indexs].value||"请选择"}}</view>
			</picker>
		</view>
		<view class="item-block">
			<text class="item-lable">出生年月：</text>
			<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange" class="item-input icon-right">
				<view class="uni-input">{{date}}</view>
			</picker>
		</view>
		<view class="item-block">
			<text class="item-lable">居　　住：</text>
			<input placeholder="居住城市" class="item-input icon-right" v-model="data.address" />
		</view>
		<view class="item-block">
			<text class="item-lable">收　　入：</text>
			<input placeholder="收入,单位K" class="item-input" type="number" v-model="data.income" />
		</view>
		<view class="item-block">
			<text class="item-lable">婚　　况：</text>
			<picker @change="pickerIsmarry" :value="indexi" range-key="value" :range="ismarryList" class="item-input icon-right">
				<view :class="[indexi==''?'item-default':'']">{{ismarryList[indexi].value||"请选择"}}</view>
			</picker>
		</view>
		<view class="item-block">
			<text class="item-lable">身　　高：</text>
			<input placeholder="身高,单位米" class="item-input" type="number" v-model="data.height" />
		</view>
		<view class="item-block">
			<text class="item-lable">体　　重：</text>
			<input placeholder="体重,单位KG" class="item-input" type="number" v-model="data.weight" />
		</view>
		<view class="item-block">
			<text class="item-lable">学　　历：</text>
			<picker @change="pickerEducation" :value="indexe" range-key="value" :range="educationList" class="item-input icon-right">
				<view :class="[indexe==''?'item-default':'']">{{educationList[indexe].value||"请选择"}}</view>
			</picker>
		</view>
		<view class="item-block">
			<text class="item-lable">交友类型：</text>
			<picker @change="pickerType" :value="indext" range-key="value" :range="typeList" class="item-input icon-right">
				<view :class="[indext==''?'item-default':'']">{{typeList[indext].value||"请选择"}}</view>
			</picker>
		</view>
		<view class="item-block">
			<text class="item-lable">爱　　好：</text>
			<input placeholder="爱好,逗号隔开" class="item-input" v-model="data.hobby" />
		</view>
		<view class="item-block">
			<text class="item-lable">特　　长：</text>
			<input placeholder="特长" class="item-input" v-model="data.speciality" />
		</view>
		<view class="item-block">
			<text class="item-lable">微　　信：</text>
			<input placeholder="微信" class="item-input" v-model="data.wechat_no" />
		</view>
		<view class="item-block">
			<text class="item-lable">手　　机：</text>
			<input placeholder="手机" class="item-input" type="number" v-model="data.phone" /> 
		</view>
		<button type="primary" style="margin-top:50upx;" @click="submit">提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({format: true})
			return {
				indexs: '',
				sexList: [{id: 1,value:'男'},{id:2,value: '女'}],
				
				indexi: '',
				ismarryList: [{id:0,value: '未婚'}, {id: 1,value: '已婚'}],
				
				indexe: '',
				educationList: [{id:0,value: '不限'}, {id: 1,value: '初中以下'}, {id: 2,value: '中专/中技'}, {id: 3,value: '高中'}, {id: 4,value: '大专'},
								{id: 5,value: '本科'}, {id: 6,value: '硕士'}, {id: 7,value: '博士'}],
								
				indext:'',
				typeList:[{id: 1,value: '交友'}, {id: 2,value: '结婚'}, {id: 3,value: '旅游'}, {id: 4,value: '其他'}],	
				
				date: currentDate,
				
				data: {thumb: '',nickname: '',sex: '',birth: '',is_marry: '',education: '',income: '',type: '',
						wechat_no: '',phone: '',height: '',weight: '',address: '',hobby: '',speciality: ''}
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			pickerSex(e) {
				this.indexs = e.target.value;  
				this.data.sex = this.sexList[e.target.value].id;
			},
			pickerIsmarry(e){
				this.indexi = e.target.value;
				this.data.is_marry = this.ismarryList[e.target.value].id;
			},
			pickerEducation(e) {
				this.indexe = e.target.value;
				this.data.education = this.educationList[e.target.value].id;
			},
			pickerType(e){
				this.indext = e.target.value;
				this.data.type = this.typeList[e.target.value].id;
			},
			bindDateChange: function(e) {
				this.date = e.target.value;
				this.data.birth = e.target.value;
			},  
			imgChoose() {
				var _self = this;
				uni.chooseImage({
					success: function(res) {  
						uni.showLoading({
							title: '上传中...'
						});
						const Paths = res.tempFilePaths;
						uni.uploadFile({
							url: _self.baseUrl + "/Upload/index",
							filePath: Paths[0],
							name: 'file',
							success: (res) => {
								var obj = JSON.parse(res.data);
								_self.data.thumb = obj.data.list;
								uni.showToast({
									title: '上传成功',
									duration: 2000
								});
							},
							fail: () => {
								uni.showToast({
									title: '上传失败',
									icon: 'none',
									duration: 2000
								});
							},complete:()=>{
								uni.hideLoading();
							}
						})
					}
				})
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			submit() {
				var authData = uni.getStorageSync('authData');
				if (authData) {
					var Authorization = authData.auth;
					uni.showLoading({
						title: '提交中...'
					});
					uni.request({
						url: this.baseUrl + "/Friends/add",
						dataType: "json",
						data: this.data,
						header: {
							Authorization: Authorization
						},
						success: (res) => {
							console.log(JSON.stringify(res));
							uni.showToast({
								title: '提交成功',
								duration: 2000
							});
						},
						fail: (res) => {
							uni.showToast({
								title: '提交失败',
								icon: 'none',
								duration: 2000
							});
						},
						complete: () => {
							uni.hideLoading();
						}
					})
				} else {
					uni.showToast({
						title: '请先登录',
						icon: 'none',
						duration: 2000
					});
					setTimeout(function() {
						uni.navigateTo({
							url: '/pages/login/login'
						});
					}, 2000);
				}
			}
		}
	}
</script>

<style>
	.item-block {
		height: auto;
		padding: 5px 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.item-lable {
		height: auto;
	}

	.item-input {
		height: 30px;
		line-height: 30px;
		padding: 0 5px;
		background: #F2F2F2;
		border-radius: 5px;
		-webkit-flex: 1;
		flex: 1;
	}

	.item-default {
		color: #7A7A7A;
	}

	.imgs {
		height: 300upx;
		width: 300upx;
		float: left;
		padding: 0;
		margin: 0;
		background: url(../../static/img/news/uploadbg.png) no-repeat;
		background-size: 100% 100%;
	}

	.icon-right:after {
		font-family: "iconfont" !important;
		content: "\e63c";
		font-size: 20px;
		position: absolute;
		color: #666666;
		top: 0;
		right: 0;
	}

	.remark {
		height: 60px;
		-webkit-flex: 1;
		flex: 1;
		padding: 5px;
		position: static;
		border-radius: 5px;
		background: #F2F2F2;
	}

	.contents {
		height: 700upx;
		-webkit-flex: 1;
		flex: 1;
		padding: 5px;
		position: static;
		border-radius: 5px;
		background: #F2F2F2;
	}

	.upload {
		width: 50upx;
		height: 50upx;
		top: 10upx;
		margin-right: 25upx;
		position: relative;
	}
</style>
